<!--
 * @Author: 杜二康 3224811364@qq.com
 * @Date: 2025-09-09 18:15:01
 * @LastEditors: 杜二康 3224811364@qq.com
 * @LastEditTime: 2025-09-09 18:15:10
 * @FilePath: \igw\components\Slider.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<!-- ~/components/ui/Slider.vue -->
<template>
  <SliderRoot
    data-slot="slider"
    :default-value="defaultValue"
    :value="modelValue"
    :min="min"
    :max="max"
    :class="
      cn(
        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
        className
      )
    "
    @update:value="handleValueUpdate"
    v-bind="$attrs"
  >
    <SliderTrack
      data-slot="slider-track"
      :class="
        cn(
          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
        )
      "
    >
      <SliderRange
        data-slot="slider-range"
        :class="
          cn(
            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
          )
        "
      />
    </SliderTrack>

    <SliderThumb
      v-for="(_, index) in thumbCount"
      :key="index"
      data-slot="slider-thumb"
      :class="
        cn(
          'border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50'
        )
      "
    />
  </SliderRoot>
</template>

<script setup>
import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "radix-vue";
import { cn } from "../utils";
import { computed } from "vue";

const props = defineProps({
  className: {
    type: String,
    default: "",
  },
  defaultValue: {
    type: Array,
    default: () => [0, 100],
  },
  modelValue: {
    type: Array,
    default: () => [0, 100],
  },
  min: {
    type: Number,
    default: 0,
  },
  max: {
    type: Number,
    default: 100,
  },
});

const emit = defineEmits(["update:modelValue"]);

// 计算 thumb 的数量
const thumbCount = computed(() => {
  const values = Array.isArray(props.modelValue)
    ? props.modelValue
    : Array.isArray(props.defaultValue)
    ? props.defaultValue
    : [props.min, props.max];
  return values.length;
});

// 处理值更新
const handleValueUpdate = (value) => {
  emit("update:modelValue", value);
};
</script>
